// // 第一个根组件一定是拥有全部react特性的,最次也得是class
// import React from 'react'
// import Slot from './Slot'

// //函数组件或者另外的类组件作为参数给到插槽里面
// const Title = (props) => <h2>我是需要用点组件的方式渲染出来</h2>

// class App extends React.Component {
//     //1.构造函数
//     constructor(props) {
//         super(props)
//     }
//     //2.渲染 http://bluemoon.com.cn
//     render() {
//         //如果不想渲染出一个真实的dom节点,可以使用站位标签
//         //标签包裹 </> 是<React.Fragment>的缩写
//         return <div>
//             <Slot title={Title}>
//                 <div>
//                     我是插入插槽的内容{props}
//                 </div>
//             </Slot>
//             <div>啦啦啦</div>
//             <h1>哈哈哈哈哈</h1>
//         </div>

//     }
// }
// export default App

import CSlot from './cSlot'
import React from 'react'
const FSlot = function (props) {
    if (Object.keys(props).length === 0) {
        console.log('没有数据')
    }
    return <div>
        我是函数滴{props.name}
    </div>
}

class App extends React.Component {
    state = {
        msg: '我是一个传话筒'
    }
    //修改msg
    setMsg(newMsg) {
        //setState接受對象,用于和state的值进行合并

        // this.state.msg = newMsg;
        // this.forceUpdata()//强制更新,官方很不推荐这个用法

        //只能通过setState修改state,只有这样才能触发更新
        this.setState({
            msg: newMsg
        })
    }
    render() {
        return <>
            {/* FSlot({props:{}}) */}
            <FSlot></FSlot>
            {/* new cSlot({props:{name:"吊袜带"}}) */}
            <CSlot setMsg={this.setMsg.bind(this)} msg={this.state.msg} name='老谢的组件'>
            </CSlot>
        </>
    }
}

export default App;